<template>
	<div class="comment">
		<div class="comment-avatar">
			<img :src="comment.customerIdfHeadImgUrl" alt="">
		</div>
		<div class="comment-right">
			<div class="detail">  
				<h2 v-if="comment.type==1" class="name">{{comment.customerIdNickName}} <img :src="require('../assets/images/sm.png')" alt=""></h2>
        <h2 v-if="comment.type==2" class="name">{{comment.customerIdNickName}} <img :src="require('../assets/images/sm.png')" alt=""></h2>
        <p v-if="comment.type==1">{{comment.content}}</p>
				<p v-if="comment.type==2">{{'@'+comment.contentIdNickName +':  ' + comment.content}}</p>
				<div class="time">{{comment.createDateName}}</div>
			</div>
			<div class="repy-list">
				<slot></slot>
			</div>
		</div>
	</div>
</template>
<script>
export default {
  name: "comment",
  props: {
    comment: {
      type: Object
    }
  }
};
</script>
<style lang="less" scoped>
.comment {
  display: flex;
  width: 100%;
  padding-left: 0.386667rem;
  padding-top: 0.373333rem;
  &-avatar {
    width: 0.813333rem;
    img {
      // width: 0.813333rem;
      width: 100%;
    }
  }
  &-right {
    flex: 1;
    margin-left: 0.4rem;
    .detail {
      border-bottom: 1px solid #dcdcdc;
			padding-bottom: .386667rem /* 29/75 */;
      .name {
        color: #333333;
        font-size: 0.373333rem;
        display: flex;
        align-items: center;
        font-weight: bold;
        img {
          width: 0.426667rem;
          margin-left: 0.16rem;
        }
      }
      p {
			 line-height: .64rem /* 48/75 */;
			 color: #444;
			 margin-top: .173333rem /* 13/75 */;
			 margin-bottom: .2rem /* 15/75 */;
      }
      .time {
        font-size: 0.32rem;
				color: #999999;
				line-height: 1;
      }
    }
    .repy-list {
      .comment {
        padding-left: 0;
        &:last-of-type {
          .repy-list {
            margin: 0;
          }
          .detail {
            border: none;
          }
        }
      }
    }
  }
}
</style>


